<template>
  <div class="container">
    <div class="header">
      <h1 class="title">徐志摩</h1>
      <p class="subtitle">中国现代诗人，最具浪漫主义色彩的文学巨匠</p>
    </div>

    <div class="content">
      <!-- 个人简介部分 -->
      <div class="bio" @mouseover="hoverEffect" @mouseleave="resetEffect">
        <p>
          徐志摩，原名徐章垿，字子渔，浙江海宁人。中国现代最著名的浪漫主义诗人之一，著有《志摩的诗》、《再别康桥》等作品。他的诗歌语言流畅，情感丰富，对中国现代诗歌产生了深远影响。
        </p>
      </div>

      <!-- 名言展示 -->
      <div class="quotes" v-for="(quote, index) in quotes" :key="index">
        <p class="quote" :class="`quote-${index}`">{{ quote }}</p>
      </div>

      <!-- 人生大事记时间轴 -->
      <div class="timeline">
        <h2>人生大事记</h2>
        <div class="timeline-item" v-for="event in events" :key="event.year">
          <div class="year">{{ event.year }}</div>
          <div class="event">{{ event.description }}</div>
        </div>
      </div>
    </div>

    <div class="footer">
      <p>&copy; 2024 徐志摩纪念站</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "XuZhimoView",
  data() {
    return {
      events: [
        { year: 1896, description: "徐志摩出生于浙江海宁。" },
        { year: 1916, description: "赴英国留学，开始接触并融入西方浪漫主义文学。" },
        { year: 1920, description: "出版诗集《志摩的诗》，逐渐成为中国现代诗歌的代表人物。" },
        { year: 1931, description: "因车祸不幸逝世，享年34岁。" },
      ],
      quotes: [
        "'我在何处，情也随之何去。'",
        "'生活是向前走的，但回望过去却更有力量。'",
        "'爱情是一种自由的感觉，它不像历史那样有时空的限制。'"
      ]
    };
  },
  methods: {
    hoverEffect(event) {
      event.target.style.transform = 'scale(1.05)';
      event.target.style.transition = 'transform 0.3s ease-out';
    },
    resetEffect(event) {
      event.target.style.transform = 'scale(1)';
    },
  }
};
</script>

<style scoped>
.container {
  font-family: 'Arial', sans-serif;
  background-color: #f7f7f7;
  color: #333;
  margin: 0;
  padding: 0;
}

.header {
  text-align: center;
  padding: 50px;
  background-color: #3e4a89;
  color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  animation: fadeIn 2s ease-out;
}

.title {
  font-size: 3em;
  font-weight: bold;
  animation: slideIn 2s ease-out;
}

.subtitle {
  font-size: 1.2em;
  margin-top: 10px;
  animation: fadeIn 2.5s ease-out;
}

.content {
  padding: 20px;
}

.bio {
  font-size: 1.2em;
  line-height: 1.6;
  margin-bottom: 30px;
  animation: fadeInUp 1.5s ease-out;
  transform: scale(1);
}

.quotes {
  font-style: italic;
  margin-top: 30px;
}

.quote {
  margin-bottom: 15px;
  opacity: 0;
  animation: fadeInUp 2s ease-out forwards;
}

.quote-0 {
  animation-delay: 1s;
}

.quote-1 {
  animation-delay: 1.5s;
}

.quote-2 {
  animation-delay: 2s;
}

.timeline {
  margin-top: 40px;
}

.timeline-item {
  margin: 15px 0;
  padding: 10px;
  background-color: #e2e2e2;
  border-left: 5px solid #3e4a89;
  animation: slideInUp 2s ease-out;
  transform: translateY(20px);
}

.year {
  font-weight: bold;
  color: #3e4a89;
}

.event {
  margin-top: 5px;
}

.footer {
  text-align: center;
  background-color: #333;
  color: #fff;
  padding: 20px;
  margin-top: 50px;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
